<template>
    <div>
        <div class="mainBox">
            <div style="display: flex;align-items: center;">
                <el-select v-model="teacherobj.gradeid" placeholder="全部学校" clearable @change="schoolchange">
                    <el-option
                        v-for="item in schoollist"
                        :key="item.gradeid"
                        :label="item.schoolname"
                        :value="item.gradeid">
                    </el-option>
                </el-select>
                <el-select v-model="subjectid" placeholder="评阅考试" @change="pyexamchange" clearable>
                    <el-option
                    v-for="item in subjectlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="roleid" placeholder="角色" @change="rolechange" clearable>
                    <el-option
                    v-for="item in role"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <el-input v-model="teacherobj.username" placeholder="姓名" clearable @change="usernamechange"></el-input>
                <el-input v-model="teacherobj.phoneNumber" placeholder="手机号" clearable @change="phonenamuberchange"></el-input>
            </div>
            <div>
                <el-button type="primary" @click="addnewschool">单个添加</el-button>
                <!-- <el-button type="primary" @click="batchuploadadd">批量导入</el-button> -->
                <!-- <el-button type="primary" @click="copyexamclickbox">名单复用</el-button> -->
                <el-button type="primary" @click="passwordClickbox" @passwordclick="passwordclick">密码策略</el-button>
                <el-button type="primary" style="background:#D54941;border-color:#D54941" @click="batchdelete">批量删除</el-button>
            </div>
        </div>
        <div style="padding:15px;background:#fff;border-radius: 10px;">
            <el-table
                class="custom-table"
                ref="multipleTable"
                :data="teacherlist"
                tooltip-effect="dark"
                style="width: 100%"
                stripe
                @selection-change="handleSelectionChange"
                :header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="phoneNumber"
                    label="账号/手机号">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="姓名">
                </el-table-column>
                <el-table-column
                    label="角色">
                    <template slot-scope="scope">
                        <span v-if="scope.row.roletype == 4">评阅教师</span>
                        <span v-else>校管理员</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="学校"
                    prop="schoolname">
                </el-table-column>
                <el-table-column
                    label="评阅考试"
                    prop="navname">
                </el-table-column>
                <el-table-column
                    label="评阅状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.teachertype == 1">不允许</span>
                        <span v-else>允许</span>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center" 
                    width="120">
                    <template slot-scope="scope">
                        <div style="display: flex;" class="scopednr">
                            <b @click="editExamschool(scope.row)">编辑</b>
                            <b @click="deleteteacher(scope.row.id)">删除</b>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="examfooter">
                <div class="examFootercontent">
                    <div>
                        <span class="totaldata">共<i>{{total?total:0}}</i>条数据</span>
                    </div>
                    <div>
                        <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[20, 50,100]"
                            @size-change="handleSizeChange"
                            :page-size="teacherobj.pagesize"
                            layout="sizes, prev, pager, next"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增考试 -->
		<addTeacher v-if="addSchoolshow" @addSchoolclick="addSchoolclick" :tabnumber="tabnumber" :role="role" :schoolEdit="schoolEdit"></addTeacher>
        <!-- 创建复用考试 -->
		<examCopy v-if="examCopyIshow" @copyemit="copyexamclick" :type="3"></examCopy>
        <!-- 批量导入 -->
         <batchUpload v-if="uploadishow" @uploadclick="uploadclick" :type="1"></batchUpload>
         <!-- 密码策略 -->
        <Passwordedit v-if="passwordshow" @passwordclick="passwordclick"></Passwordedit>
    </div>
</template>

<script>
import addTeacher from '../../../components/teacher/addteacher.vue'
import examCopy from '../../../components/copyexam.vue'
import batchUpload from '../../../components/upload.vue'
import Passwordedit from '../../../components/teacher/passwordedit.vue'
import {getteacherlist,getexamallschool,getsubjectnavsix,deleteTeacherStudent} from '../../../api/api.js'
export default {
    data() {
        return {
            stopexamlist: [{}], // 表格数据
            addSchoolshow:false,
            examCopyIshow:false,
            uploadishow:false,
            passwordshow:false,
            teacherobj:{
                username:'',
                nav5id:'',
                nav6id:'',
                roletype:'',
                gradeid:'',
                phoneNumber:'',
                page:1,
                pagesize:20
            },
            roleid:'',
            subjectid:'',
            teacherlist:[],
            schoollist:[],
            subjectlist:[],
            role:[{name:'校管理员',id:3},{name:'评阅教师',id:4}],
            schoolEdit:{},
            multipleSelection:[],
            total:0
        }
    },
    computed: {
        examId() {
            return this.$store.state.examId;
        }
    },
    watch: {
    	examId(newVal) {
            if (newVal) {
                this.overviewlist(newVal);
                this.$store.commit('setExamId', ''); // 重置状态
            }
        }	
    },
    mounted() {
        this.examcontent = JSON.parse(sessionStorage.getItem('examContent'));
        this.getteacherlistclick(this.examcontent.nav5id)
        this.getschoolnamelist(this.examcontent.nav5id)
        this.getsubjectlist(this.examcontent.nav5id)
    },
    methods: {
        //新增考试
        addnewschool(){
            this.addSchoolshow = true
            this.tabnumber = 1
            this.schoolEdit = {}
        },
        addSchoolclick(){
            this.getteacherlistclick(this.examcontent.nav5id)
            this.addSchoolshow = false
        },
        editExamschool(con){
            this.schoolEdit = con
            this.addSchoolshow = true
            this.tabnumber = 2
        },
        copyexamclick(){
            this.examCopyIshow = false
             this.getteacherlistclick(this.examcontent.nav5id)
        },
        copyexamclickbox(){
            this.examCopyIshow = true
        },
        batchuploadadd(){
            this.uploadishow = true
        },
        uploadclick(){
            this.uploadishow = false
        },
        passwordClickbox(){
            this.passwordshow = true
        },
        passwordclick(data){
            this.passwordshow = data
        },
        //教师列表
        getteacherlistclick(id){
            this.teacherobj.nav5id = id
            this.teacherobj.nav6id = this.subjectid?this.subjectid:0
            this.teacherobj.roletype = this.roleid?this.roleid:0
            getteacherlist(this.teacherobj).then(res=>{
                console.info(res)
                if(res.code===0){
                    this.teacherlist = res.obj.results
                    this.total = res.obj.count
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        // 分页
        handleSizeChange(val) {
            this.teacherobj.pagesize = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        handleCurrentChange(val) {
            this.teacherobj.page = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //获取这场考试的所有学校
        getschoolnamelist(id){
            let obj={
                nav5id:id
            }
            getexamallschool(obj).then(res=>{
                console.info(res)
                if(res.code===0){
                    this.schoollist = res.obj
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        //学校筛选
        schoolchange(val){
            this.teacherobj.gradeid = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //姓名筛选
        usernamechange(val){
            this.teacherobj.username = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //手机号筛选
        phonenamuberchange(val){
            this.teacherobj.phoneNumber = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //评阅考试筛选
        pyexamchange(val){
            this.teacherobj.nav6id = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //角色筛选
        rolechange(val){
            this.teacherobj.roletype = val
            this.getteacherlistclick(this.examcontent.nav5id)
        },
        //评阅考试列表
        getsubjectlist(id){
            let obj={
                id:id
            }
            getsubjectnavsix(obj).then(res=>{
                console.info(res)
                if(res){
                    this.subjectlist = res.map(item => {
                        const id = Object.keys(item)[0]; // 获取对象的第一个键
                        return {
                            id: parseInt(id), // 如果需要id是数字类型就加上parseInt，否则直接用id
                            name: item[id]
                        };
                    });
                }else{
                    this.$message.error(res.msg)
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 单个删除教师
        deleteteacher(id){
            let obj={
                userids:[id]
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteTeacherStudent(obj).then(res=>{
                        if(res.code==0){
                            this.getteacherlistclick(this.examcontent.nav5id)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        // 批量删除教师
        batchdelete(){
            if(this.multipleSelection.length==0){
                this.$message.error('请选择要删除的数据')
                return
            }
            let obj={
                userids:this.multipleSelection.map(item=>item.id)
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    deleteTeacherStudent(obj).then(res=>{
                        if(res.code==0){
                            this.getteacherlistclick(this.examcontent.nav5id)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        }
    },
    components: {
        addTeacher,examCopy,batchUpload,Passwordedit
    }
}
</script>

<style scoped>
.mainBox{
    background:#fff;
    margin-bottom:15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:15px;
}
.mainBox >>> .el-button{
    background:#366EF4;
    border:solid 1px #366EF4;
    height:36px;
}
.mainBox >>> .el-select .el-input__inner, .mainBox >>> .el-input__inner{
	 width:150px; 
     margin-left:4px;
     border-radius: 10px;
     height:36px;
}
.mainBox >>> .el-input__icon{
    line-height:36px;
}
.mainBox >>> .distpicker-address-wrapper select{
    height:35px;
    line-height:35px;
    border-radius:10px;
    font-size:14px;
    color:#999;
    border:solid 1px #DCDFE6;
}
.mainBox ul{
    display: flex;
    align-items: center;
}
.mainBox ul li{
    font-size:14px;
    margin-right:15px;
    padding:0 10px;
    line-height:36px;
    cursor: pointer;
    border-bottom:solid 2px #fff;
}
.mainBox ul li:hover,.mainBox ul li.hover{
    color:#0052D9;
    border-bottom:solid 2px #0052D9;
}
.custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:42px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
     .el-table .el-table__cell{
        padding:8px 0;
    }
    .examfooter{
		width:100%;
		height:54px;
		left:0;
		bottom:0;
	}
	.examFootercontent{
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
    .scopednr b{
        display: inline-block;
        font-weight:normal;
        margin:0 8px;
        color:#165DFF;
        cursor: pointer;
    }
    .scopednr b:last-child{
        color:#D54941
    }
</style>